<template>
    <view class="container">
        <header-bar :config="config"></header-bar>
        <view class="title"
            >历史订单日志<text>共{{ datas.length }}条日志</text></view
        >
        <scroll-view>
            <view class="item" v-for="(item, index) in datas" :key="index" v-if="false">
                <view v-if="item.NewState == 3">
                    <view class="value-item" v-for="(value, vIndex) in getValues(item)" :key="vIndex">
                        <text class="value-name">{{ value.name }}:</text>
                        <text class="vlaue-text" v-if="value.name != '上传凭证'">{{ value.value }}</text>
                        <image
                            class="vlaue-image"
                            @tap="previewImage(easyGetImgUrl(value.value))"
                            v-else
                            mode="aspectFit"
                            :src="easyGetImgUrl(value.value)"></image>
                    </view>
                </view>
                <view class="value-item" v-else>
                    <text class="value-name" v-if="false">内容:</text>
                    <text class="vlaue-text">{{ item.Message ? item.Message : "无内容" }}</text>
                </view>
                <view class="img-box" v-if="item.Images">
                    <image
                        class="img"
                        v-for="(img, imgIndex) in easyImgList(item.Images)"
                        :src="img"
                        @tap="previewImageMore(easyImgList(item.Images), imgIndex)"></image>
                </view>
                <text class="item-time">{{ item.AddTime }}</text>
            </view>
            <view class="mt-sm bg-white">
                <view class="wuliu-list ptb-sm plr">
                    <view v-for="(item, index) in datas" :key="index">
                        <view class="time">{{ item.AddTime }}</view>
                        <view class="name">{{ item.Message ? item.Message : "无内容" }}</view>
                    </view>
                </view>
            </view>
            <mescroll-empty v-if="datas.length < 1" :option="emptyOption"></mescroll-empty>
        </scroll-view>
    </view>
</template>

<script>
import { GetOrderLogList } from "@/service/api/order.js"
export default {
    components: {},
    data() {
        return {
            config: {
                title: "订单日志",
                centerSlot: true,
                rightSlot: false,
                rightBtns: [
                    {
                        id: 1,
                        type: "redo",
                    },
                ],
            },
            orderId: 0,
            datas: [],
            images: [],
        }
    },
    onLoad(e) {
        this.orderId = e.orderId
    },
    mounted() {
        this.getOrderLogList()
    },
    methods: {
        //
        getOrderLogList() {
            let param = {
                orderId: this.orderId,
            }
            let path = "?orderId=" + this.orderId
            GetOrderLogList(param, path).then((res) => {
                console.log(res)
                if (res.State == 1) {
                    this.datas = res.Data
                    this.$forceUpdate()
                }
            })
        },
        getValues(item) {
            let msg = item.Message
            try {
                let newArr = []
                msg = msg.replace("[", "")
                msg = msg.replace("]", "")
                let arr = msg.split("},")
                arr.forEach((e) => {
                    e = e.replace("{", "")
                    e = e.replace("}", "")
                    let value = e.split(",")
                    let textObj = {}
                    value.forEach((sub) => {
                        let textArr = sub.split(":")
                        let textLabel = textArr[0]
                        let textvalue = textArr[1]
                        textvalue = textvalue.substring(textvalue.length - 1, 1)
                        if (textLabel == "name") {
                            textObj.name = textvalue
                        }
                        if (textLabel == "value") {
                            textObj.value = textvalue
                        }
                    })
                    newArr.push(textObj)
                })
                console.log(newArr)
                return newArr
            } catch (e) {
                return []
            }
        },
        //预览图片
        previewImage(e) {
            console.log(e)
            let arr = []
            arr.push(e)
            uni.previewImage({
                urls: arr,
            })
        }, //预览图片
        previewImageMore(e, index) {
            let arr = e
            uni.previewImage({
                current: e[index],
                urls: arr,
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.title {
    font-size: 32rpx;
    font-weight: bold;
    border-top: 16rpx solid $uni-bg-color-grey;
    padding: 40rpx 32rpx 0rpx 32rpx;
    display: flex;
    align-items: center;
    text {
        font-size: 28rpx;
        padding-left: 22rpx;
        color: $app-color-main;
        font-weight: normal;
    }
}
.item {
    padding: $app-page-padding;
    background: $color-white;
    display: flex;
    flex-direction: column;
    border-bottom: solid 1rpx $border;

    .item-msg {
        font-weight: 700;
        margin-bottom: 20rpx;
    }

    .item-time {
        display: flex;
        justify-content: flex-end;
    }
}
.value-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 12rpx;
    .value-name {
        margin-bottom: 12rpx;
        font-weight: 700;
    }
    .vlaue-image {
    }
}
.img-box {
    margin-top: 10rpx;
    margin-bottom: 10rpx;
}
.img {
    width: 160rpx;
    height: 160rpx;
    margin-bottom: 10rpx;
    border-radius: 8rpx;
    margin-right: 12rpx;
}
.bg-white {
    background-color: #fff;
    margin: 54rpx 32rpx 32rpx 32rpx;
}
.wuliu-list {
    .time {
        font-size: 24rpx;
        color: $color-gray-1;
        font-weight: bold;
    }
    .name {
    }
}
.wuliu-list > view {
    font-size: 28rpx;
    position: relative;
    padding-left: 30rpx;
    color: #666;
    border-left: 1rpx dashed #ebebeb;
    padding-bottom: 40rpx;
}

.wuliu-list > view:after {
    position: absolute;
    top: 10rpx;
    left: -8rpx;
    z-index: 2;
    width: 16rpx;
    height: 16rpx;
    background: #e5e5e5;
    content: "";
    border-radius: 50%;
}
.wuliu-list > view:first-child:after {
    background: red;
}
.wuliu-list > view view:last-child {
    font-size: 28rpx;
    color: $color-gray-1;
    padding-top: 18rpx;
}
.wuliu-list > view:last-child {
    border-left: none;
}

.order-item-main {
    display: flex;
    flex: 1;
    flex-direction: row;
    padding-top: 24rpx;
}

.order-item-imgs {
    display: flex;
    flex: 1;
    flex-direction: row;
    align-items: center;

    .img-item {
        position: relative;
        margin-right: 24rpx;
        display: flex;
        align-items: center;

        .order-item-name {
            flex: 1;
            font-size: 28rpx;
            color: $color-gray-1;
            display: flex;
            align-items: center;
            padding-left: 14rpx;
        }

        .order-item-img {
            display: flex;
            width: 120rpx;
            height: 120rpx;
            // border: 1px solid $app-color-main;
            border-radius: 8rpx;
        }

        .text-num {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 40rpx;
            border-bottom-left-radius: 10rpx;
            border-bottom-right-radius: 10rpx;
            color: $color-white;
            background: rgba($color-black, 0.3);
            font-size: $font-size-24;
        }
    }
}
</style>
<style>
page {
    background: #ffffff;
}
</style>
